<template>
    <div class="or-page">
			<div
				@click="$emit('closeDialog')"
				class="flex col-center back-title bottom-line">
				<span class="iconfont icon-20">&#xe601;</span>
				<div class="ml-20">
					<span class="font-16 font-w">绑定信息</span>
				</div>
			</div>
			
			<div class="box">
				<div class="top-title">基础信息</div>
				<ul class="fixed28">
					<li>
						<span>订单号</span>
						<span class="right-text">{{ '20256661594851515' }}</span>
					</li>
					<li>
						<span>客户姓名</span>
						<span class="right-text">{{ '王先生' }}</span>
					</li>
					<li>
						<span>联系电话</span>
						<span class="right-text">{{ '13631338857' }}</span>
					</li>
					<li>
						<span>车辆型号</span>
						<span class="right-text">{{ '江淮瑞风 瑞风M4' }}</span>
					</li>
					<li>
						<span>车牌号码</span>
						<span class="right-text">{{ '粤SE455E' }}</span>
					</li>
					<li>
						<span>服务类型</span>
						<span class="right-text">{{ '局部补漆-国产PPG' }}</span>
					</li>
					<li>
						<span>服务日期</span>
						<span class="right-text">{{ '2025/06/29' }}</span>
					</li>
					<li class="col-center">
						<span>订单状态</span>
						<span class="tag tag-success">已完成</span>
					</li>
				</ul>
				<div class="bottom-box">
					<p class="title-grey">服务门店</p>
					<p>星漆匠（虎门旗舰店）</p>
				</div>
				<div class="bottom-box">
					<p class="title-grey">备注</p>
					<p>其他收款码</p>
				</div>
			</div>

			<div class="box">
				<div class="top-title">服务详情</div>
				<div class="project-box bottom-line">
					<div class="sub-title font-12 font-w mb-6">服务项目</div>
					<ul>
						<li>
							<div>
								<p>局部整喷</p>
								<p class="color-ccc">数量：1</p>
							</div>
							<span class="right-text">
								￥{{ '35000.00' }}
							</span>
						</li>
						<li>
							<div>
								<p>国产PPG清漆</p>
								<p class="color-ccc">数量：1</p>
							</div>
							<span class="right-text">
								￥{{ '9700.00' }}
							</span>
						</li>
					</ul>
				</div>
				<div class="project-box">
					<div class="sub-title font-12 font-w mb-6">价格明细</div>
					<ul>
						<li>
							<span>应付金额</span>
							<span class="right-text">
								￥{{ '35000.00' }}
							</span>
						</li>
						<li>
							<span>优惠金额</span>
							<span class="color-red">
								￥{{ '35000.00' }}
							</span>
						</li>
						<li class="mt-8 pt-8 top-line font-14 font-w">
							<span>实付金额</span>
							<span class="color-green">
								￥{{ '35000.00' }}
							</span>
						</li>
					</ul>
				</div>
			</div>

			<div class="box">
				<div class="top-title">服务图片</div>
				<p class="mb-6">车损图片</p>
				<div class="img-box">
					<img class="bad-car-img" :src="tempImg" alt="图片">
				</div>
				<p class="text-center mt-12">修复后图片待上传</p>
			</div>

			<div class="top-box mb-12">
				<p class="mb-12"><span class="iconfont icon-20">&#xebc8;</span></p>
				<p class="md mb-12">1年质保服务</p>
				<p>保修至：{{ value.business_order_order_no }}</p>
				<div class="bottom-row">
					<p>·保修期内如出现质量问题，免费返工</p>
					<p>·请保存此凭证作为保修依据</p>
					<p>·如有问题请联系门店客服</p>
				</div>
			</div>
			<div>
				<button class="btn btn-black" @click="$emit('closeDialog')">确定</button>
			</div>
	</div>
</template>

<script>
  export default {
    props: {
        value: Object
    },
    data: () => {
        return {
					tempImg: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
				}
    }
  }
</script>
<style scoped>
	.bottom-row {
		margin-top: 10px;
		text-align: left;
	}
	.bottom-row p {
		margin-bottom: 4px;
	}
	.project-box {
		color: #000;
		padding: 10px 0;
	}
	.bottom-box {
		padding-top: 8px;
		margin-top: 12px;
		border-top: 1px solid #ededed;
	}
	.bottom-box .title-grey {
		color: #666;
		margin-bottom: 5px;
	}
	.img-box {
		width: 40%;
		height: 90px;
		border-radius: 12px;
		border: 1px solid #ededed;
		margin-bottom: 10px;
		padding: 2px;
	}
	.bad-car-img {
		width: 100%;
	}
	.back-title {
		color: #000;
		padding-bottom: 12px;
		margin-bottom: 12px;
	}
	.or-page {
		background-color: #fff;
		height: 80vh;
		border-radius: 8px;
		padding: 16px;
		color: #9aa0ad;
		font-size: 12px;
		text-align: left;
		overflow: auto;
	}
	.or-title {
		font-size: 16px;
		font-weight: bold;
		color: #000;
	}
	.right-text{
		color: #000
	}
	.project-box li {
		display: flex;
		justify-content: space-between;
	}
	.fixed28 li {
		height: 28px;
		line-height: 28px;
		display: flex;
		justify-content: space-between;
		list-style: none;
	}
	.top-box {
		background-color: #eff6ff;
		text-align: center;
		padding: 16px;
		color: #2e50b3;
	}
	.top-box .md {
		font-size: 16px;
		font-weight: bold;
	}
	.amount {
		color: #2e50b3;
		font-size: 16px;
		font-weight: bold;
	}
	.desc-box {
		padding: 12px;
		background-color: #fefce8;
		color: #94622d
	}
</style>
